<!-- 申请退换票组件 -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    width="1000px"
    @close="handleClose"
    :close-on-click-modal="false"
    class="exchange-application-dialog"
  >
    <div class="exchange-application-container">
      <!-- 退换票申请信息 -->
      <div class="application-info card">
        <h3 class="card-title">退换票申请信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">发票状态：</span>
            <span class="value">
              <span>{{
                dict.invoice_status[Number(formData.invoiceStatus)]
              }}</span>
            </span>
          </div>
          <div class="info-item">
            <span class="label">发票种类：</span>
            <span class="value">
              <span>{{
                dict.invoice_category[Number(formData.invoiceCategory)]
              }}</span>
            </span>
          </div>
          <div class="info-item">
            <span class="label">姓名：</span>
            <span class="value">{{ formData.studentName }}</span>
          </div>
          <div class="info-item">
            <span class="label">身份证号：</span>
            <span class="value">{{ formData.idNumber }}</span>
          </div>
          <div class="info-item">
            <span class="label">单位：</span>
            <span class="value">{{ formData.unitName }}</span>
          </div>
          <div class="info-item">
            <span class="label">单位统一信用代码：</span>
            <span class="value">{{ formData.socialCreditCode }}</span>
          </div>
          <div class="info-item">
            <span class="label">申请时间：</span>
            <span class="value">{{ formData.invoiceRefundTime }}</span>
          </div>
          <div class="info-item">
            <span class="label">申请人：</span>
            <span class="value">{{ formData.invoiceRefundPerson }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系方式：</span>
            <span class="value">{{ formData.phonenumber }}</span>
          </div>
          <div class="info-item">
            <span class="label">报名项目：</span>
            <span class="value">{{ formData.projectMap }}</span>
          </div>
          <div class="info-item">
            <span class="label">培训班：</span>
            <span class="value">{{ formData.trainingClass }}</span>
          </div>
          <div class="info-item">
            <span class="label">培训类别：</span>
            <span class="value">
              <span>{{
                dict.training_type[Number(formData.trainingType)]
              }}</span>
            </span>
          </div>
          <div class="info-item">
            <span class="label">费用：</span>
            <span class="value amount">{{ formData.invoiceAmount }}</span>
          </div>
          <div class="info-item">
            <span class="label">退换票金额：</span>
            <span class="value amount highlight">{{
              formData.refundAmount
            }}</span>
          </div>
          <div class="info-item full-width">
            <span class="label">退换票原因：</span>
            <span class="value">{{ formData.invoiceRefundReason }}</span>
          </div>
        </div>
      </div>

      <!-- 审核选项 -->
      <div class="review-options card">
        <h3 class="card-title">审核选项</h3>
        <div class="option-group">
          <span class="label">是否通过退换票申请：</span>
          <el-radio-group v-model="invoiceStatus" class="radio-group">
            <el-radio label="4" border>通过</el-radio>
            <el-radio label="5" border>不通过</el-radio>
          </el-radio-group>
        </div>

        <div class="remark-section">
          <span class="label">原因备注：</span>
          <el-input
            type="textarea"
            :rows="4"
            v-model="invoiceRefundReason"
            placeholder="请输入拒绝原因"
            :disabled="invoiceStatus === '4'"
          />
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "ExchangeApplicationDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
    dict: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      invoiceStatus: "4",
      invoiceRefundReason: "",
      dialogTitle: "退换票申请",
    };
  },
  methods: {
    handleClose() {
      this.$emit("close");
      this.resetForm();
    },
    handleCancel() {
      this.$emit("close");
      this.resetForm();
    },
    handleSubmit() {
      const data = {
        invoiceStatus: this.invoiceStatus,
        invoiceRefundReason: this.invoiceRefundReason,
        exchangeId: this.formData.exchangeId,
      };

      this.$emit("submit", data);
      this.handleCancel();
    },
    resetForm() {
      this.invoiceStatus = "4";
      this.invoiceRefundReason = "";
    },
  },
};
</script>

<style scoped>
.exchange-application-dialog {
  border-radius: 8px;
  overflow: hidden;
}

.exchange-application-container {
  padding: 20px;
  background-color: #f5f7fa;
  max-height: 70vh;
  overflow-y: auto;
}

.application-info {
  margin-bottom: 20px;
}

.section-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 10px;
}

.info-item {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

.info-item .label {
  font-weight: 500;
  color: #606266;
  margin-bottom: 5px;
  font-size: 14px;
  white-space: nowrap;
  min-width: 80px;
}

.info-item .value {
  color: #303133;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e9ebee;
  flex-grow: 1;
}

.amount {
  font-weight: 600;
  color: #409eff;
}

.amount.highlight {
  color: #f56c6c;
  font-weight: 700;
}

.full-width {
  grid-column: span 2;
}

.review-options {
  margin-top: 20px;
}

.option-group {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.option-group .label {
  font-weight: 500;
  color: #606266;
  white-space: nowrap;
}

.radio-group {
  display: flex;
  gap: 15px;
}

.radio-group ::v-deep .el-radio {
  margin-right: 0;
}

.remark-section {
  margin-top: 15px;
}

.remark-section .label {
  display: block;
  margin-bottom: 10px;
  color: #606266;
  font-weight: 500;
}

.dialog-footer {
  text-align: right;
  padding: 20px;
  background-color: #f5f7fa;
  border-top: 1px solid #ebeef5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-item.full-width {
    grid-column: span 1;
  }

  .option-group {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>